<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="16">
        <el-card shadow="never" :body-style="{ padding: '20px 0px' }">
          <ul class="partOne">
            <li class="todoItem f" v-for="item in 4">
              <i class="todoIcon">
                <DynamicImg :src="'todo-all'" width="40" height="45"/>
              </i>
              <p class="todoDetail f-c">
                <i class="num bold xl">{{ item }}</i>
                <i class="name">待办{{ item }}</i>
              </p>
            </li>
          </ul>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never" :body-style="{ padding: '20px', height: '6rem' }">
          <div class="partTwo">
            <h2 class="xl">{{ user.username }}, 下午好！</h2>
            <p class="sm">"加油！撸起袖子就是干！！！"</p>
          </div>
        <!-- card body -->
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-card shadow="never" :body-style="{ padding: '20px', height: '90px' }">
          <div class="partThree">
            <div class="header f f-ali-c w-100p">
              <h3 class="m-r-30 lg bold">业绩统计</h3>
              <div class="selectOne f">
                <span class="showOne sm" @click="selectOneClick()">{{ workData.showPerformance.type }}</span>
                <i 
                class="arrow transition" 
                :class="`${workData.arrowUp? 'arrowUp':'arrowDown'}`" 
                @click="selectOneClick"></i>
                <ul class="options transition" :style="{height: workData.showOptions? '68px': '0px'}">
                  <li 
                  v-for="item in workData.performance" 
                  :key="item.value" 
                  :class="{'active': workData.showPerformance.value === item.value}"
                  @click="changePerformance(item.value)"
                  >{{ item.type }}</li>
                </ul>
              </div>
              <el-button class="manageBtn f-1" type="default" size="default" link icon="Setting">管理</el-button>
              
            </div>
            <ul class="content m-t-28">
              <li v-for="item in workData.performance" :key="item.type">
                <ul class="item f-ali-c f-jc-sb" v-show="item.value === workData.showPerformance.value">
                  <li class="f-c item" v-for="child in item.data" :key="child.value">
                    <i class="bolder xxl">{{ child.value }}</i>
                    <span class="c-gray">{{ IPerformanceItem[child.text as keyof object] }}</span>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        <!-- card body -->
        </el-card>
        
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="16">
        <el-card shadow="never" :body-style="{ padding: '20px' }">
          <div class="partFour">
            <div class="header f-ali-c f-jc-sb">
              <h3 class="bold lg"><span class="default">2024-9-20</span> 待办</h3>
              <el-radio-group v-model="workData.todo.activeName">
                <el-radio-button value="yesterday">前一天</el-radio-button>
                <el-radio-button value="today">今天</el-radio-button>
                <el-radio-button value="tomorrow">后一天</el-radio-button>
              </el-radio-group>
            </div>
            <div class="content">
              <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
            </div>
          </div>
        </el-card>
        
      </el-col>
      <el-col :span="8">
        <el-card shadow="never" :body-style="{ padding: '20px', height: '500px' }">

        <!-- card body -->
        </el-card>
        
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="16">
        <el-card shadow="never" :body-style="{ padding: '20px' }">

        <!-- card body -->
        </el-card>
        
      </el-col>
      <el-col :span="8">
        <el-card shadow="never" :body-style="{ padding: '20px' }">

        <!-- card body -->
        </el-card>
        
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue';
import DynamicImg from '@/components/DynamicImg.vue';
import useUserStore from '@/store/modules/user';
import data from './data.json'
import { IData, IPerformance, IPerformanceItem } from './modules';

const user = useUserStore()
const workData = reactive({
  arrowUp: true,
  showOptions: false,
  aboutMe: [],
  showList: {
    entryList: [],
    performanceList: ['month', 'today', 'yesterday', 'allCustomer', 'monthNewCustomer']
  },
  showPerformance: {type: '本人业绩', value: 1},
  performance: [] as IPerformance[],
  todoList: [],
  todo: {
    activeName: 'today'
  },
  quickEntrance: []
})

const getWorkData = () => {
  data.performance.forEach((item: IPerformance) => {
    const arr: IData[] = [] 
    item.data.forEach((i) => {
      if(workData.showList.performanceList.indexOf(i.text) !== -1) {
        arr.push(i)
      }
    })
    const obj = Object.assign(item)
    obj.data = arr
    workData.performance.push(obj)
  })
}
const changePerformance = (value: number) => {
    workData.performance.forEach(item => {
      if(item.value === value) {
        workData.showPerformance = item
      }
    })
    workData.showOptions = false
}

const selectOneClick = () => {
  workData.arrowUp = !workData.arrowUp
  workData.showOptions = !workData.showOptions
}

// partFour
// const tabClick = () => {

// }
onMounted(() => {
  getWorkData()
})
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 10px;

  .partOne {
    height: 3.8rem;
    margin: 1.1rem 0px;
    display: flex;
    justify-content: space-around;

    .todoItem {
      margin-top: .4rem;
      flex: 1;
      justify-content: center;
      gap: 1.6rem;
      .todoDetail {
        gap: .8rem;
        .num {
          color: #ff9900;
        }
      }

      &+li {
        border-left: 1px solid lighten(gray, 45);
      }
      
    }
  }

  .el-card__body {
    position: relative;
  }
  .partTwo {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: absolute;
    right: 8rem;
    top: 2.5rem;

    p {
      color: gray;
    }
  }

  .partThree {

    .header {
      position: relative;
      .selectOne {
        width: 80px;
        position: relative;

        .showOne {
          color: #c4c4d6;
        }

        .options {
          height: 0;
          overflow: hidden;
          position: absolute;
          top: calc(100% + 10px);
          left: 1%;
          z-index: 999;
          display: flex;
          flex-direction: column;
          width: 100px;
          border-radius: 3px;
          box-shadow: 1px 1px 10px 1px lighten($color: gray, $amount: 40);

          li {
            text-align: center;
            padding: 10px;

            &.active {
              font-weight: bold;
              color: var(--theme-color);
              background-color: lighten(skyblue, 22);
            }
          }
        }

        .arrowUp {
          position: relative;
          top: 4px;
          transform: rotate(-45deg);
        }

        .arrowDown {
          position: relative;
          top: 1px;
          transform: rotate(135deg);
        }
      }

      .manageBtn {
        position: absolute;
        right: 0px;
        top: 10%;
      }

    }

    .content {
      .item {
        flex: 1;
        gap: 10px;
      }
    }
  }
}

</style>